<template>
  <div>
      <div class="top-box">
        <div class="top">
            <div>
                <span @click="fun()"><img src="/image/Mine/zjt.png" alt=""></span>
                <p>确认订单</p> 
            </div>
        </div>  
      </div>
      <div class="main">
          <div class="main-box">
              <div class="content">
                  <span><img src="" alt=""></span>
                  <p class="title">盒马礼品卡<i>{{ newarr[0].price}}</i>元(感谢电子卡)<span>￥<b>{{ addarr}}</b>.00</span></p>
                  <p class="center">规格:1张</p>
                  <p class="bottom">单价:￥<b>{{ newarr[0].price}}</b>.00/张&nbsp;&nbsp; 数量:<span>{{value}}</span>张</p>
              </div>
              <div>
                  <p>
                      购买数量
                      <van-stepper v-model="value" theme="round" button-size="22" disable-input />
                  </p>
              </div>
              <div>
                  <p>共1种商品 合计:<b>{{ addarr}}</b>.00</p>
              </div>
          </div>
      </div>
      <div class="bot-box">
          <p><span>合计:</span>￥<b>{{ addarr}}</b>.00 <i>提交订单</i></p>
      </div>
  </div>
</template>

<script>
export default {
     data() {
        return {
            value: 1,
            arr:[
                {id:0, price:"50"},
                {id:1,price:"88"},
                {id:2,price:"100"},
                {id:3,price:"200"},
                {id:4,price:"300"},
                {id:5,price:"500"},
                {id:6,price:"666"},
                {id:7,price:"800"},
                {id:8,price:"1000"}
            ]
        };
     },
    computed:{
        newarr(){
            return this.arr.filter(v=>this.$route.params.order==v.id)
            },
        addarr(){
            return this.arr.filter(v=>this.$route.params.order==v.id)[0].price*this.value
        }
    },
     methods:{
         fun(){
             this.$router.go(-1)
         },
        //  funb(){
        //      console.log(this.$route.params.order)
        //  }
     }
}
</script>

<style scoped>
.top-box{
    width: 100%;
    border-bottom: 1px solid #dddddd;
}
.top{
    width: 100%;
    display: flex;
    justify-content: center;
    height: 0.35rem;
}
.top div{
    width: 93%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.top div span,.top div span img{
    position: absolute;
    left: 2%;
    width: 0.2rem;
    height: 0.2rem;
}
.top div p{
    font-size: 0.16rem;
}
.main{
    width: 100%;
    display: flex;
    justify-content: center;
}
.main .main-box{
    width: 93%;
    border: 1px solid red;
}
.main .main-box .content{
   border: 1px solid chartreuse;
}
.bot-box{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 0.6rem;
    display: flex;
    justify-content: center;
    border: 1px solid chartreuse;
}
.bot-box p{
    width: 94%;
    display: flex;
    font-weight: bold;
    height: 0.6rem;
    font-size: 0.14rem;
    align-items: center;
    color: red;
    justify-content: flex-end;
}
.bot-box p span{
    color: #030303;
    font-weight: normal;
}
.bot-box p i{
    color: white;
    font-weight: normal;
    /* font-size: 0.12rem; */
    border-radius: 0.18rem;
    font-style: normal;
    background-color: #0dafff;
    padding: 0.07rem 0.14rem;
    margin-left: 0.1rem;
    box-shadow: 0rem 0rem 0.04rem 0rem #0dafff;
}
</style>